import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    ListView,
    ScrollView,
    TouchableOpacity,
    TextInput,
    Touchable
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome'

const Dimensions = require('Dimensions');
const {width,height} = Dimensions.get('window');
// common 
import BottomBarLimit from '../../common/BottomBarLimit'
import NavigatorBar from '../../common/NavigationBar';
import Mechanism from '../../component/Mechanism';
import {setSpText,setHW} from '../../component/ScreenUtil';
import { searchOrg } from '../../api/home'


export default class MechanismSearchpage extends Component{
    constructor(props) {
        super(props);
        this.state = {
            MechanismList: []
        };
    }

    // 渲染按钮
    renderLeftButton(image){
        return <TouchableOpacity
            style={[global.CommonStyleSheet.NavLeftButton]}
            onPress={()=>{
                this.props.navigation.goBack();
            }}>
            <Image
                style={{ width: setHW(68), height: setHW(68) }}
                source={image}/>
        </TouchableOpacity>;
    }

    componentDidMount() {
        var data = {
            sendData: {},
            page: 1,
            rows: 10
        }
        searchOrg(data).then(res=>{
            this.setState({
                MechanismList: res.LIST
            })
        })
    }

    render() {
        return (
            <View style={styles.appContainer}>
                <NavigatorBar 
                    title={'机构列表'}
                    style={styles.navigatorBar}
                    leftButton={this.renderLeftButton(require('../../assets/imgs/back.png'))}
                    rightButton={this.renderRightButton()}
                />
                {/* 有机构时 再把下面ScrollView一行打开 */}
                {/* <ScrollView>
                      <Mechanism MechanismList={this.state.MechanismList} />
                </ScrollView>    */}
                {/* 没机构时 敬请期待的提示： */}
                <View style={styles.empty}>
                    <Image style={{width: 190, height: 150}} source={require('../../assets/imgs/noting.png')} />
                    <Text style={{textAlign:'center',height:60,lineHeight:30,fontSize:14}}>敬请期待</Text>
                </View> 
            </View>
        )
    }

    renderRightButton(image) {
        return <View style={{ padding: 8 }}>
            <View style={{flexDirection: 'row'}}>
                <TouchableOpacity onPress={() => this.handleSearch()} style={{
                    flexDirection
                        : 'row', justifyContent: 'center', alignItems: 'center'
                }}>
                    <Image
                        style={{ width: setHW(28), height: setHW(28), marginRight: 1 }}
                        source={require('../../assets/imgs/search.png')} />
                    <Text style={{ marginLeft: setHW(4), color: '#666' }}>搜索</Text>
                </TouchableOpacity>
                {/* <TouchableOpacity onPress={()=>this.handleSort()} style={{marginLeft: 8}}><Icon style={{fontSize: 14, color: '#333'}} name={'sort'} /></TouchableOpacity> */}
            </View>
        </View>;
    }

    handleSort() {
        global.log('mechanism');
    }

    handleSearch() {
        this.props.navigation.navigate('SearchComPage', {
            type: 'mechanism'
        })
    }
    // createElement
}

const styles = StyleSheet.create({
    empty:{
        backgroundColor:'#fff',
        flexDirection:'column',
        alignItems: 'center',
        justifyContent: 'center',
        width:width,
        height: height - setHW(132)
    },
    appContainer: {
        // flex: 1
    }
})